<template>
  <div style="width: 1400px; align-self: center; justify-content: center;">
	  <div style="height: 40px;">
	  	
	  </div>
  	<el-carousel :interval="5000" type="card" height="400px" indicator-position="outside">
  	    <el-carousel-item v-for="item in carouselData" :key="item" style="box-shadow: 3px 3px 15px 2px #d3d3d3;">
  	        <el-image :src="item.url" alt="" :fit="cover"/>
  	    </el-carousel-item>
  	</el-carousel>
	<div><TLFS/></div>
  </div>
</template>

<script setup>
import {ref} from "vue"
import TLFS from '@/components/icons/timeLimitedFlashSale'
const carouselData = [
	{url: new URL("@/assets/images/1.jpg",import.meta.url).href},
	{url: new URL("@/assets/images/2.jpg",import.meta.url).href},
	{url: new URL("@/assets/images/3.jpg",import.meta.url).href},
	{url: new URL("@/assets/images/4.jpg",import.meta.url).href},
	{url: new URL("@/assets/images/5.jpg",import.meta.url).href},
	{url: new URL("@/assets/images/6.jpg",import.meta.url).href}
]

</script>

<style scoped lang="scss">
.el-carousel__item:nth-child(2n) {
}

.el-carousel__item:nth-child(2n + 1) {
}
:deep(.el-carousel__indicator--horizontal .el-carousel__button){
	margin-top: 20px;
    width: 50px;
    height: 8px;
    border-radius: 31px;
    background: #AAAAAA80;
  }
// 指示灯选中的样式
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button){
	  margin-top: 20px;
    width: 50px;
    height: 8px;
    border-radius: 31px;
    background: #fff;
  }
</style>